<template>
  <div>
    <a-drawer
      v-model:open="visible"
      :placement="placement"
      :width="320"
      :closable="false"
      class="article-drawer"
    >
      <template #title>
        <div class="drawer-header">
          <IconList class="icon" />
          <span>文章工具</span>
        </div>
      </template>

      <div class="drawer-content">
        <!-- 操作按钮 -->
        <div class="drawer-section">
          <h4 class="section-title">快捷操作</h4>
          <ArticleActions
            @like="emit('like')"
            @collect="emit('collect')"
            @fullscreen="emit('fullscreen')"
            @comment="emit('comment')"
          />
        </div>

        <!-- 目录 -->
        <div class="drawer-section">
          <h4 class="section-title">文章目录</h4>
          <ArticleToc ref="tocRef" />
        </div>
      </div>
    </a-drawer>

    <!-- 浮动按钮 -->
    <div v-if="!visible" class="floating-button" @click="visible = true">
      <IconMenu class="icon" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import IconList from '~/assets/icons/IconList.vue'
import IconMenu from '~/assets/icons/IconMenu.vue'
import ArticleActions from './ArticleActions.vue'
import ArticleToc from './ArticleToc.vue'

defineProps<{
  placement?: 'left' | 'right'
}>()

const emit = defineEmits<{
  like: []
  collect: []
  fullscreen: []
  comment: []
}>()

const visible = ref(false)
const tocRef = ref()

defineExpose({
  open: () => (visible.value = true),
  close: () => (visible.value = false),
  extractToc: () => tocRef.value?.extractToc(),
})
</script>

<style scoped>
.drawer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #1a202c;
}

.drawer-header .icon {
  width: 20px;
  height: 20px;
  color: #667eea;
}

.drawer-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  padding-left: 8px;
  border-left: 3px solid #667eea;
}

.floating-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 999;
}

.floating-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.floating-button .icon {
  width: 24px;
  height: 24px;
  color: white;
}

/* 只在移动端显示浮动按钮 */
@media (min-width: 969px) {
  .floating-button {
    display: none;
  }
}
</style>

<style>
.article-drawer .ant-drawer-body {
  padding: 20px;
}

.article-drawer .ant-drawer-header {
  border-bottom: 2px solid #f7fafc;
}
</style>
